<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">区域设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.height"
        />
      </el-form-item>
      <el-form-item label="外边距">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.margin"
        />
      </el-form-item>
      <el-form-item label="显示内容设定" class="video-swiper-text-set">
        <el-checkbox-group v-if="showOptions&&showOptions.length" v-model="optionsInfo.checkList">
          <el-checkbox
              v-for="item in showOptions"
              :label="item.value"
              :key="item.value"
              @change="(e)=>handleChange(e, item)"
          >
            {{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="文本">
        <el-input
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo.title"
        />
      </el-form-item>

      <template v-if="(optionsInfo.checkList).includes(1)">
        <div class="title-info">
          <el-divider content-position="left">视频信息设置</el-divider>
        </div>
        <el-form-item label="视频内容">
          <el-button type="primary" size="small" @click="handleSelect('formVideoInfo',(optionsInfo.video))">
            视频内容
          </el-button>
        </el-form-item>
        <!--已经上传的资源-->
        <carouselEditor
            :delayState="false"
            :designer="designer"
            resourceType="video"
            :option-model="optionModel"
            :selected-widget="selectedWidget"
        />
        <!--已经上传的资源-->
        <el-form-item label="选中素材" class="resource-area" v-if="false">
          <div class="picture-resource">
            <Draggable
                class="list-group"
                @end="handleDragEnd"
                :list="optionsInfo['video']"
                :animation="100"
            >
              <template v-for="(item,index) in optionsInfo['video']">
                <div class="flex-box item-area">
                  <p class="name flex-box-left">
                    <el-tooltip class="item" effect="dark" :content="(item.name)" placement="top-start">
                      <el-button>{{ item.name }}</el-button>
                    </el-tooltip>
                  </p>
                  <p class="icon flex-box-right">
                    <i class="el-icon-delete" @click.prevent="handleDelete(index,'video')"/>
                    <i class="el-icon-thumb"></i>
                  </p>
                </div>
              </template>
            </Draggable>

          </div>
        </el-form-item>

        <el-form-item label="区域高度(%)">
          <el-input-number
              :min="0"
              size="small"
              v-model="optionsInfo.videoHeight"
          />
        </el-form-item>
      </template>

      <template v-if="(optionsInfo.checkList).includes(2)">
        <div class="title-info">
          <el-divider content-position="left">轮播图信息设置</el-divider>
        </div>
        <el-form-item label="轮播图内容" v-if="(optionsInfo.checkList).includes(2)">
          <el-button type="primary" size="small" @click="handleSelect('formCarouselInfo',(optionsInfo.carouselInfo))">
            轮播图内容
          </el-button>
        </el-form-item>

        <el-form-item label="图片是否铺满">
          <el-switch v-model="optionsInfo.fill"/>
        </el-form-item>


        <!--已经上传的资源-->
        <carouselEditor
            :delayState="true"
            :designer="designer"
            resourceType="carouselInfo"
            :option-model="optionModel"
            :selected-widget="selectedWidget"
        />
        <el-form-item label="选中素材" class="resource-area" v-if="false">
          <div class="picture-resource">
            <Draggable
                class="list-group"
                @end="handleDragEnd"
                :list="optionsInfo['carouselInfo']"
                :animation="100"
            >
              <template v-for="(item,index) in optionsInfo['carouselInfo']">
                <div class="flex-box item-area">
                  <div class="name flex-box-left">
                    <el-tooltip class="item" effect="dark" :content="(item.name)" placement="top-start">
                      <el-button>{{ item.name }}</el-button>
                    </el-tooltip>
                    <div class="delay">
                      <el-input
                          size="small"
                          type="number"
                          :min="5"
                          :step="1"
                          v-model="item.delay"
                          placeholder="请输入等待时间"
                          @change.native.prevent="(e)=>handleChangeDelay(e)"
                      />
                    </div>
                  </div>
                  <p class="icon flex-box-right">
                    <i class="el-icon-delete" @click.prevent="handleDelete(index,'carouselInfo')"/>
                    <i class="el-icon-thumb"/>
                  </p>
                </div>
              </template>
            </Draggable>

          </div>
        </el-form-item>

        <el-form-item label="区域高度(%)">
          <el-input-number
              :min="0"
              size="small"
              v-model="optionsInfo.carouselHeight"
          />
        </el-form-item>


      </template>

      <template v-if="(optionsInfo.checkList).includes(3)">
        <div class="title-info">
          <el-divider content-position="left">文本信息设置</el-divider>
        </div>
        <el-form-item label="文本内容">
          <el-button type="primary" size="small" @click="handleSelect('formEditorInfo',(optionsInfo.content))">
            文本内容
          </el-button>
        </el-form-item>
        <el-form-item label="区域高度(%)">
          <el-input-number
              :min="0"
              size="small"
              v-model="optionsInfo.contentHeight"
          />
        </el-form-item>
      </template>

    </div>

    <!--富文本弹层-->
    <updateFormEditor
        @handleSure="handleSure"
        @handleCancel="handleCancel"
        :info="formEditorInfo.info"
        :visible="formEditorInfo.visible"
    />

    <!--选择视频-->
    <updateVideo
        :key="uuid"
        @handleSure="handleSure"
        @handleCancel="handleCancel"
        :info="formVideoInfo.info"
        :visible="formVideoInfo.visible"
    />

    <!--轮播图弹层-->
    <updatePicture
        @handleSure="handleSure"
        @handleCancel="handleCancel"
        :info="formCarouselInfo.info"
        :visible="formCarouselInfo.visible"
    />

  </div>
</template>

<script>
import {v4 as uuid} from 'uuid';
import Draggable from "vuedraggable"
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import updateVideo from "@c/public/layer/template/updateVideo/index.vue";
import updatePicture from "@c/public/layer/template/updatePicture/index.vue";
import updateFormEditor from "@c/public/layer/template/updateFormEditor/index.vue";
import carouselEditor from "../basicInfo/carousel-editor.vue";
import roomNameKeyEditor
  from "@sc/templateDetails/modules/homeRight/property-editor/module/scene-edit/basicInfo/roomNameKey-editor.vue";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "infoPublicConfig1080-editor",

  componentName: "infoPublicConfig1080-editor",

  mixins: [],

  components: {
    roomNameKeyEditor,
    Draggable,
    updateVideo,
    updateFormEditor,
    updatePicture,
    carouselEditor,
  },

  props: {
    designer: Object,
    optionModel: Object,
    selectedWidget: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      uuid:uuid(),
      radio: 1,
      screenType: '',
      optionsInfo: Object(),
      constantDic: constantDic,
      showOptions: [
        {
          value: 1,
          label: '视频'
        },
        {
          value: 2,
          label: '轮播图'
        },
        {
          value: 3,
          label: '文本'
        }
      ],
      predefineColors: types['predefineColors'],

      // 富文本
      formEditorInfo: {
        visible: false,
        info: '',
      },
      // 视频
      formVideoInfo: {
        visible: false,
        info: '',
      },
      // 轮播图
      formCarouselInfo: {
        visible: false,
        info: '',
      },
    }
  },

  methods: {
    handleDragEnd() {
    },

    handleChange(val, row) {
      let value = (row.value);
      let {checkList} = (this.optionsInfo);
      // 不能选择三个选项
      if (checkList && (checkList.length) === 3) {
        this.$lodash.pull(checkList, value);
      } else if (checkList && (checkList.length) === 0) {
        checkList.push(value)
      }
    },

    // 选择文本内容&视频
    handleSelect(val, content) {
      let params = Object();
      this.uuid = uuid();
      switch (val) {
        case 'formEditorInfo':
          // 修改对应的字段
          Reflect.set(params, 'updataType', 'content');
          // 旧的数据
          Reflect.set(params, 'content', content || '')
          Reflect.set((this.formEditorInfo), 'visible', true);
          Reflect.set((this.formEditorInfo), 'info', params);
          break
        case 'formVideoInfo':
          // 查找资源库对应的资源
          Reflect.set(params, 'type', 'video');
          // 修改对应的字段
          Reflect.set(params, 'updataType', 'video');
          // 旧的数据
          Reflect.set(params,'content',content || [])
          // Reflect.set(params, 'content', [])
          Reflect.set(params, 'multiple', true);
          Reflect.set((this.formVideoInfo), 'visible', true);
          Reflect.set((this.formVideoInfo), 'info', params);
          break
        case 'formCarouselInfo':
          // 查找资源库对应的资源
          Reflect.set(params, 'type', 'image,office');
          // 修改对应的字段
          Reflect.set(params, 'updataType', 'carouselInfo');
          // 旧的数据
          Reflect.set(params,'content',content || []);
          // Reflect.set(params, 'content', []);
          // 是否支持多图片
          Reflect.set(params, 'multiple', true);
          Reflect.set((this.formCarouselInfo), 'visible', true);
          Reflect.set((this.formCarouselInfo), 'info', params);
          break
      }
    },

    // 取消弹层
    handleCancel() {
      Reflect.set((this.formEditorInfo), 'visible', false);
      Reflect.set((this.formVideoInfo), 'visible', false);
      Reflect.set((this.formCarouselInfo), 'visible', false);
    },

    // 更新就的数据
    handleSure(valInfo) {
      const self = this;
      let {key, val} = valInfo;
      if (key === 'content') {
        Reflect.set((self.optionsInfo), key, val);
      } else {
        const updatedArray = self.$lodash.map(val, function(object) {
          return self.$lodash.assign({}, object, { delay: 5 });
        });
        console.log(updatedArray)
        let preInfo = self.optionsInfo[key];
        // let info = [...preInfo, ...updatedArray];
        let info = [...updatedArray];
        Reflect.set((self.optionsInfo), key, []);
        Reflect.set((self.optionsInfo), key, info);
      }
    },

    // 删除上传的资源
    handleDelete(index, type) {
      let {carouselInfo, video} = this.optionsInfo;
      switch (type) {
        case 'carouselInfo':
          // this.$lodash.pullAt(carouselInfo, [index]);
          // console.log(carouselInfo)
          // Reflect.set((this.optionsInfo), 'carouselInfo', carouselInfo)
         carouselInfo.splice(index, 1);
          break
        case 'video':
          // this.$lodash.pullAt(video, [index]);
          // Reflect.set((this.optionsInfo), 'video', video)
          video.splice(index, 1);
          break
      }
    },

    handleChangeDelay(event,key){
      console.log(event)
      console.log(key)
    },
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val[val.config];
      },
      deep: true,
      immediate: true
    }
  }
}
</script>


<style lang="scss" scoped>
.video-swiper-text-set {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    display: none;
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }
  }
}

.resource-area {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 14px;
  align-self: center;
  align-items: center;

  :deep(.el-form-item__label) {
    width: 100% !important;
    @include fontWeight();
  }

  :deep(.el-form-item__content) {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

.picture-resource {
  .item-area {
    min-width: inherit;
    min-height: inherit;

    .name {
      border: none;
      display: flex;
      flex-direction: column;
      min-width: calc(100% - 64px);
      overflow: hidden;
      margin-right: 10px;

      .el-button {
        border: none;
        background: transparent;
        @include singleEllipsis(100%);
        text-align: left;
        padding: 9px 0
      }
    }

    .icon {
      min-width: 48px;
      height: auto;
      border: none;
      font-size: 18px;
      display: flex;
      align-items: end;
      text-align: center;
      justify-content: center;
      i{
        cursor: pointer;
        &:first-child{
          padding-right: 6px;
        }
        &:hover{
          color: dodgerblue;
        }
      }
    }
  }
}
</style>